<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>旋转的立方体</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        input{
            display:none;
        }
        label{
            display: inline-block;
            margin-top: 1em;
        }
        /*视图宽和高必须是盒子每个面宽高与font-size的em值的乘积，.box的宽高必须是100%，才能使盒子旋转的中心在几何中心*/
        .view{
            margin-top: 5em;
            perspective: 72em;
            width:16em;
            height:16em;
        }
        .box{
            position: relative;
            width:100%;
            height:100%;
            transform-style: preserve-3d;/*这句很重要*/
            transition: all 1s  ease;
            transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
        }
        .box>div{
            position: absolute;
            width:8em;
            height: 8em;
            padding: 1em 0 0 1em;
            line-height: 2em;
            font-size: 2em;
            font-weight: bold;
            color: #000;
            border:.2em solid black;
            /*box-shadow: -1em -1em 2em 2em #ccc inset;*/
            background: radial-gradient(at 2em 2em,skyblue 30%,green);
            opacity:.8;
        }
        /*3D旋转中，正方向是X前面向上，Y是前面向右，Z是顶部向右，
        换句话说，就是X向右，Y向下，Z向外，从正方向往里看，顺时针为正向旋转*/
        .box_front{
            transform: translateZ(4em);
        }
        .box_back{
            transform: translateZ(-4em) rotateY(180deg);
        }
        .box_top{
            transform: translateY(-4em) rotateX(90deg);
        }
        .box_bottom{
            transform: translateY(4em) rotateX(-90deg);
        }
        .box_left{
            transform: translateX(-4em) rotateY(-90deg);
        }
        .box_right{
            transform: translateX(4em) rotateY(90deg);
        }
        .box>div>strong{
            font-size: 2em;
            text-shadow: 0 0 1em #fff;
        }

        #front:checked ~ .view .box{
            transform: rotate(0);
        }
        #back:checked ~ .view .box{
            transform:rotateY(180deg);
        }
        #top:checked ~ .view .box{
            transform:rotateX(-90deg);
        }
        #bottom:checked ~ .view .box{
            transform:rotateX(90deg);
        }
        #left:checked ~ .view .box{
            transform:rotateY(90deg);
        }
        #right:checked ~ .view .box{
            transform:rotateY(-90deg);
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">可以旋转的立体盒子</h1>
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            <label class="btn btn-primary btn-sm" for="front">前面</label>
            <input id="front" type="radio" name="box">
            <label class="btn btn-primary btn-sm" for="back">后面</label>
            <input id="back" type="radio" name="box">
            <label class="btn btn-primary btn-sm" for="top">顶部</label>
            <input id="top" type="radio" name="box">
            <label class="btn btn-primary btn-sm" for="bottom">底部</label>
            <input id="bottom" type="radio" name="box">
            <label class="btn btn-primary btn-sm" for="left">左侧</label>
            <input id="left" type="radio" name="box">
            <label class="btn btn-primary btn-sm" for="right">右侧</label>
            <input id="right" type="radio" name="box">

            <div class="view center-block">
                <div class="box">
                    <div class="box_front"><strong>前面</strong></div>
                    <div class="box_back"><strong>后面</strong></div>
                    <div class="box_top"><strong>顶部</strong></div>
                    <div class="box_bottom"><strong>底部</strong></div>
                    <div class="box_left"><strong>左侧</strong></div>
                    <div class="box_right"><strong>右侧</strong></div>
                </div>
            </div>

        </div>
    </div>
    <br>
    <br>
    <br>
    <p><a href="dingfuhuangzhuang.html">查看另一个照片盒子</a> </p>
</div>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
</body>
</html>